import { Button } from 'antd'
import React, { useState } from 'react'
import axios from 'axios'
import md5 from 'md5'
import { useTranslation } from 'react-i18next';

function Index() {
  const [text,setText]=useState('有道翻译咖啡吧')
  const [fany,setFany]=useState()
  const { t, i18n } = useTranslation();

  const fn=async()=>{
    const APP_KEY=import.meta.env.VITE_APP_KEY
    const APP_SCRET=import.meta.env.VITE_APP_SCRET
    const salt=Date.now().toString()
    const sign=md5(`${APP_KEY}${text}${salt}${APP_SCRET}`)

    const {data}=await axios.get('/ydapi/api',{
      params:{
        q:text,
        from:'auto',
        to:'en',
        appKey:APP_KEY,
        salt,
        sign
      }
    })
    // 文件名：child/Index.tsx  行数：28
    console.log(data)
    setText(data.query)
    setFany(data.translation[0])
  }

  return (
    <div  className='bg-white text-black w-full h-full
    dark:text-white dark:bg-black'>
      {text}
      <p>翻译:{fany}</p>
      <Button onClick={fn}>点击</Button>

      
      <p>{t('Welcome to React')}</p>
    </div>
  )
}

export default Index
